<template>
  <el-select
    v-model="values"
    ref="myselect"
    multiple
    filterable
    allow-create
    default-first-option
    @focus="focusSelect"
    placeholder="请选择文章标签"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "HTML",
          label: "HTML"
        },
        {
          value: "CSS",
          label: "CSS"
        },
        {
          value: "JavaScript"
        }
      ],
      values: ["测试1"]
    };
  },
  methods: {
    /**
     * blur需要在focus里面处理
     */
    focusSelect(e) {
      this.$refs.myselect.$refs.input.blur = () => {
        // 获得blur之后输入的值
        let value = this.$refs.myselect.$refs.input.value;
        // 值中包含了则不加入
        value && !this.values.includes(value) && this.values.push(value);
        console.log("最终结果：", this.values);
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 400px;
  overflow: auto;
}
</style>
